<template>
  <section class="sample-section"  v-loading.lock="loading"
                   element-loading-text="拼命加载中">
      <el-form ref="dataForm" :model="formData" :rules="rules" label-width="130px">
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="任务名称" prop="title">
              <el-input v-model="formData.title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="结算方式" prop="settle_type">
              <el-radio-group v-model="formData.settle_type">
                <el-radio :label="1">面议</el-radio>
                <el-radio :label="2">计件</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="任务期限" prop="task_time">
              <el-radio-group v-model="formData.task_time" @change="changeTaskTime">
                <el-radio :label='1'>长期</el-radio>
                <el-radio :label='2'>时间段</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row" v-if="show_task_time">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="时间段" prop="task_time">
              <el-date-picker
                style="width: 280px"
                v-model="formData.time_section"
                type="daterange"
                range-separator="-"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="审核模式" prop="check_type">
              <el-radio-group v-model="formData.check_type">
                <el-radio :label="1">自动审核</el-radio>
                <el-radio :label="2">手动审核</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="默认任务" prop="is_default">
              <el-checkbox v-model="formData.is_default" :true-label="1" :false-label="0">设置为默认任务</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="任务要求" prop="content">
              <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 8}" v-model="formData.content"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item>
              <el-button type="primary" size="small" @click="dataFormSubmit()">更   新</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
  </section>
</template>

<script>
  import { Message } from 'element-ui'

  export default {
    name: 'create',
    data() {
      return {
        loading:false,
        show_task_time: false,
        formData: {
          'id': 0,
          'title':'',
          'content': '',
          'settle_type' : '1',
          'task_time': '1',
          'check_type': '1',
          'is_default': 0,
          'time_section': []
        },
        rules: {
          title: [
            { required: true, message: '请输入任务名称', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入任务要求', trigger: 'blur' }
          ],
          settle_type: [
            { required: true, message: '请选择结算方式', trigger: 'blur' }
          ],
          task_time: [
            { required: true, message: '请选择任务期限', trigger: 'change' }
          ],
          check_type: [
            { required: true, message: '请选择审核模式', trigger: 'change' }
          ],
        }
      }
    },
    mounted () {
      this.loading = false
      this.formData.id = this.$route.query ? this.$route.query.id : 0;
      this.init()
    },
    methods: {
      init() {
        this.$http.get(`/company/task/info/${this.formData.id}`,{}).then(res => {
          if (res.code === 0) {
            this.formData.title = res.task.title
            this.formData.content = res.task.content
            this.formData.task_time = res.task.task_time
            if(res.task.task_time == 2) {
              this.show_task_time = true
              this.formData.time_section = [res.task.time_start, res.task.time_end]
            }
            this.formData.settle_type = res.task.settle_type
            this.formData.check_type = res.task.check_type
            this.formData.is_default = res.task.is_default
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        console.log(this.formData)
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http.post(`/company/task/update/${this.formData.id}`, this.formData).then((res) => {
              if (res && res.code === 0) {
                Message({
                  message: '更新任务成功',
                  center: true,
                  type: 'success'
                })
                this.$router.push('/tasks/list');
              }
            }).catch((error) => {
            })
          }
        })
      },
      changeTaskTime(val) {
        this.show_task_time = val === 2 ? true :false
      }
    }
  }
</script>

<style scoped>

</style>
